<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            什么叫默认行为？
                就是有些默认就有事件
                例如a标签默认就有点击事件，他点击事件做的事就是跳转

            所以，如果我想给a标签加一个自己定义的点击事件，又不要跳转
            那就要阻止他的默认行为
         -->

        <!-- 这里阻止了默认行为 -->
        <!-- 我希望他既要阻止默认行为，又要只触发一次，有没有办法？ -->
        <!-- 可以用多个修饰符，一直点就可以了 -->
        <!-- 跟顺序无关，只要写上就有效果 -->
        <a @click.prevent="fn1" href="http://www.baidu.com">点我啊</a>

        <!-- 代表这个父盒子的点击事件，只能点它自身触发，无法通过冒泡触发 -->
        <div class="father" @click.self="fatherFn">

            <!-- 阻止冒泡 -->
            <button @click.stop="fn2">点我啊</button>

            <!-- 对于这个按钮而言，只会触发一次 -->
            <button @click.once="fn2">我的事件只有一次哦！</button>

            <!-- 没加事件默认也有冒泡 -->
            <!-- 阻止所有内容冒泡，就要一个一个加事件再加stop，很麻烦 -->
            <button>点我1</button>
            <button>点我2</button>
            <button>点我3</button>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                fn1 () {
                    alert('a被点了')
                },
                fn2 () {
        
                    alert('按钮被点了')
                },
                fatherFn () {
                    alert('父盒子被点了')
                }
            }
        })
    </script>
</body>
</html>